<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user">
        <van-icon name="manager-o" @click="jump" />
      </div>
    </div>
    <van-tabs v-model="active" sticky swipeable>
      <van-tab :title="value.name" v-for="value in catelist" :key="value.id">
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="300"
          :immediate-check="false"
        >
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <hm_black v-for="item in value.postlist" :key="item.id" :post="item"></hm_black>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import hm_black from "@/components/hm_contentblack.vue";
import { getCateList } from "@/apis/category.js";
import { getContent } from "@/apis/post.js";

export default {
  components: {
    hm_black
  },
  data() {
    return {
      active: localStorage.getItem("hmtt_token") ? 1 : 0,
      catelist: []
      // postlist: []
    };
  },
  async mounted() {
    // 获取栏目数据
    let res = await getCateList();
    // console.log(res);

    this.catelist = res.data.data;
    // 数据改造
    this.catelist = this.catelist.map(v => {
      return {
        ...v,
        postlist: [],
        pageSize: 6,
        pageIndex: 1,
        loading: false,
        finished: false,
        isLoading: false
      };
    });
    // console.log(this.catelist);
    // 获取当前被激活栏目的新闻数据
    this.getpost();
  },
  watch: {
    active() {
      // console.log(this.active);

      // 如果当前栏目postlist有数据，则不会再发请求
      if (this.catelist[this.active].postlist.length == 0) {
        this.getpost();
      }
    }
  },
  methods: {
    jump() {
      let id = localStorage.getItem("hmtt_id");
      if (id) {
        this.$router.push({ path: `/personal/${id}` });
      } else {
        this.$router.push({ name: "login" });
      }
    },
    onRefresh() {
      // 页码重置为1
      this.catelist[this.active].pageIndex = 1;
      //  数据清空
      this.catelist[this.active].postlist.length = 0;
      // 重置finished状态
      this.catelist[this.active].finished = false;
      this.getpost();
    },
    onLoad() {
      // 下拉页码++
      this.catelist[this.active].pageIndex++;
      this.getpost();
    },
    async getpost() {
      // 请求新闻数据封装
      let id = this.catelist[this.active].id;
      let pageIndex = this.catelist[this.active].pageIndex;
      let pageSize = this.catelist[this.active].pageSize;
      let current = (
        await getContent({
          category: id,
          pageSize,
          pageIndex
        })
      ).data.data;
      this.catelist[this.active].postlist.push(...current);
      // 重置上拉loading
      this.catelist[this.active].loading = false;
      // 重置下拉刷新
      this.catelist[this.active].isLoading = false;
      // 判断是否已经拉取到末尾
      if (current.length < this.catelist[this.active].pageSize) {
        this.catelist[this.active].finished = true;
      }
      console.log(this.catelist[this.active].postlist);
    }
  }
};
</script>

<style lang="less" scoped>
.index {
  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background-color: #f00;
    .logo {
      color: #fff;
      .iconnew {
        font-size: 50px;
      }
    }
    .search {
      flex: 1;
      height: 40px;
      margin-top: 5px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      margin: 0 10px;
    }
    .user {
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>